<template>
  <!-- 单选 -->
  <div>
    <el-row>
      <el-col :span="6">【题型】:<span>单选题</span></el-col>
      <el-col :span="6">【编号】:<span>29</span></el-col>
      <el-col :span="6">【难度】:<span>简单</span></el-col>
      <el-col :span="6">【标签】:<span>css3,bfc</span></el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="6">【学科】:<span>前端</span></el-col>
      <el-col :span="6">【目录】:<span>css基础</span></el-col>
      <el-col :span="6">【方向】:<span>企业服务</span></el-col>
    </el-row>
    <hr
      style="filter: alpha(opacity=100, finishopacity=0, style=2)"
      width="100%"
      color="#ebebeb"
      SIZE="10"
    />
    <el-row>
      <el-col :span="24">【题干】:</el-col>
    </el-row>
    <!-- 单选 -->
    <div>
      <!-- 题目 -->
      <el-row class="marginTop">
        <el-col :span="24"
          ><span style="color: #3b3bff">1+1等于？</span></el-col
        >
      </el-row>
      <!-- 选项 -->
      <el-row>
        <el-col :span="24">单选题 选项：（以下选中的选项为正确答案）</el-col>
      </el-row>
      <!-- 单选按钮 -->
      <div>
        <el-row class="marginTop">
          <el-radio v-model="radio" label="1">1</el-radio>
        </el-row>
        <el-row class="marginTop">
          <el-radio v-model="radio" label="2">2</el-radio>
        </el-row>
        <el-row class="marginTop">
          <el-radio v-model="radio" label="3">3</el-radio>
        </el-row>
        <el-row class="marginTop">
          <el-radio v-model="radio" label="4">4</el-radio>
        </el-row>
      </div>
      <hr
        style="filter: alpha(opacity=100, finishopacity=0, style=2)"
        width="100%"
        color="#f6f6f6"
        SIZE="10"
      />
      <!-- 参考答案 -->
      <el-row>
        【参考答案】：<el-button @click="isVideo = true" type="danger"
          >视频答案预览</el-button
        >
      </el-row>
      <!-- 视频组件 -->
      <el-row v-if="isVideo">
          <video-player></video-player>
      </el-row>
      <hr
        style="filter: alpha(opacity=100, finishopacity=0, style=2)"
        width="100%"
        color="#dfdfdf"
        SIZE="10"
      />
      <!-- 答案解析 -->
      <el-row class="marginTop">
        【答案解析】：<span>这里是答案解析</span>
      </el-row>
      <hr
        style="filter: alpha(opacity=100, finishopacity=0, style=2)"
        width="100%"
        color="#dddddd"
        SIZE="10"
      />
      <el-row class="marginTop">
        【题目备注】：<span>这里是题目备注</span>
      </el-row>
    </div>
  </div>
</template>

<script>
import VideoPlayer from './VideoPlayer.vue'
export default {
  components: { VideoPlayer },
  name: 'theRadio',
  data () {
    return {
      radio: '1', // 单选按钮
      checkList: [], // 多选按钮
      isVideo: false // 视频组件显示
    }
  }
}
</script>

<style scoped>
.marginTop {
  margin: 10px 0;
}
.buttonCenter {
  margin-top: 30px;
  text-align: center;
}
</style>
